<template>
  <div class="m-404">
    <n-result status="404" title="404 资源不存在" description="对不起，您访问的页面可能不存在或者您没有权限访问">
      <template #footer>
        <n-space justify="center">
          <n-button tag="a" @click="handleBack">返回</n-button>
          <n-button type="primary" tag="a" href="/">首页</n-button>
        </n-space>
      </template>
    </n-result>
  </div>
</template>

<script setup lang="ts">
  import { NResult, NButton, NSpace } from 'naive-ui'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  function handleBack() {
    router.back()
  }
</script>

<style lang="scss">
  .m-404 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
